<template>
    <div class="content" :style='{ "padding": "30px" }'>
        <div class="text"
            :style='{ "margin": "50px auto", "fontSize": "24px", "color": "rgb(51, 51, 51)", "textAlign": "center", "fontWeight": "bold" }'>
            欢迎使用 {{ this.$project.projectName }}</div>
        <div class="cardView">
            <div class="cards"
                :style='{ "margin": "0 0 20px 0", "alignItems": "center", "justifyContent": "center", "display": "flex" }'>
                <div :style='{ "boxShadow": "0 1px 6px rgba(0,0,0,.3)", "margin": "5px 10px", "borderRadius": "0px", "display": "flex" }'
                    v-if="isAuth('attractioninformation', '首页总数')">
                    <div :style='{ "background": "red" }'></div>
                    <div
                        :style='{ "width": "160px", "alignItems": "center", "flexDirection": "column", "justifyContent": "center", "display": "flex" }'>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "20px", "color": "#333", "fontWeight": "bold", "height": "24px" }'>
                            {{ attractioninformationCount }}</div>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "16px", "color": "#666", "height": "24px" }'>
                            景点信息总数</div>
                    </div>
                </div>
                <div :style='{ "boxShadow": "0 1px 6px rgba(0,0,0,.3)", "margin": "5px 10px", "borderRadius": "0px", "display": "flex" }'
                    v-if="isAuth('hotelinformation', '首页总数')">
                    <div :style='{ "background": "red" }'></div>
                    <div
                        :style='{ "width": "160px", "alignItems": "center", "flexDirection": "column", "justifyContent": "center", "display": "flex" }'>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "20px", "color": "#333", "fontWeight": "bold", "height": "24px" }'>
                            {{ hotelinformationCount }}</div>
                        <div
                            :style='{ "margin": "5px 0", "lineHeight": "24px", "fontSize": "16px", "color": "#666", "height": "24px" }'>
                            酒店信息总数</div>
                    </div>
                </div>
            </div>
            <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px;">
                <el-card style="width: 100%;margin: 0 10px;" v-if="isAuth('attractioninformation', '首页统计')">
                    <div id="attractioninformationChart1" style="width:100%;height:400px;"></div>
                </el-card>
                <el-card style="width: 50%;margin: 0 10px;" v-if="isAuth('hotelinformation', '首页统计')">
                    <div id="hotelinformationChart1" style="width:100%;height:400px;"></div>
                </el-card>
            </div>
        </div>
    </div>
</template>
<script>
//2
import router from '@/router/router-static'
import * as echarts from 'echarts'
export default {
    data() {
        return {
            attractioninformationCount: 0,
            hotelinformationCount: 0,
        };
    },
    mounted() {
        this.init();
        this.getattractioninformationCount();
        this.attractioninformationChat1();
        this.gethotelinformationCount();
        this.hotelinformationChat1();
    },
    methods: {
        init() {
            if (this.$storage.get('Token')) {
                this.$http({
                    url: `${this.$storage.get('sessionTable')}/session`,
                    method: "get"
                }).then(({ data }) => {
                    if (data && data.code != 0) {
                        router.push({ name: 'login' })
                    }
                });
            } else {
                router.push({ name: 'login' })
            }
        },
        getattractioninformationCount() {
            this.$http({
                url: `attractioninformation/count`,
                method: "get"
            }).then(({
                data
            }) => {
                if (data && data.code == 0) {
                    this.attractioninformationCount = data.data
                }
            })
        },

        attractioninformationChat1() {
            this.$nextTick(() => {
                // attractioncategory attractioncategory
                //  remainingtickets

                var attractioninformationChart1 = echarts.init(document.getElementById("attractioninformationChart1"), 'fresh-cut');
                this.$http({
                    url: `attractioninformation/value/attractioncategory/remainingtickets`,
                    method: "get",
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        let res = data.data;
                        let xAxis = [];
                        let yAxis = [];
                        let pArray = []
                        for (let i = 0; i < res.length; i++) {
                            xAxis.push(res[i].attractioncategory);
                            yAxis.push(parseFloat((res[i].total)));
                            pArray.push({
                                value: parseFloat((res[i].total)),
                                name: res[i].attractioncategory
                            })
                        }
                        console.log("xAxis:"+xAxis)
                        console.log("yAxis:"+yAxis)
                        var option = {};
                        option = {
                            title: {
                                text: '景点门票数量统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} : {c}'
                            },
                            xAxis: {
                                type: 'category',
                                data: xAxis
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: yAxis,
                                type: 'bar'
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        attractioninformationChart1.setOption(option);
                        //根据窗口的大小变动图表
                        window.onresize = function () {
                            attractioninformationChart1.resize();
                        };
                    }
                });
            })
        },






        gethotelinformationCount() {
            this.$http({
                url: `hotelinformation/count`,
                method: "get"
            }).then(({
                data
            }) => {
                if (data && data.code == 0) {
                    this.hotelinformationCount = data.data
                }
            })
        },

        hotelinformationChat1() {
            this.$nextTick(() => {

                var hotelinformationChart1 = echarts.init(document.getElementById("hotelinformationChart1"), 'macarons');
                this.$http({
                    url: "hotelinformation/group/status",
                    method: "get",
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        let res = data.data;
                        let xAxis = [];
                        let yAxis = [];
                        let pArray = []
                        for (let i = 0; i < res.length; i++) {
                            xAxis.push(res[i].status);
                            yAxis.push(parseFloat((res[i].total)));
                            pArray.push({
                                value: parseFloat((res[i].total)),
                                name: res[i].status
                            })
                        }
                        var option = {};
                        option = {
                            title: {
                                text: '酒店房间状态统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} : {c} ({d}%)'
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: ['25%', '55%'],
                                    center: ['50%', '60%'],
                                    data: pArray,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        hotelinformationChart1.setOption(option);
                        //根据窗口的大小变动图表
                        window.onresize = function () {
                            hotelinformationChart1.resize();
                        };
                    }
                });
            })
        },






    }
};
</script>
<style lang="scss" scoped>
.cardView {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .cards {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;

        .card {
            width: calc(25% - 20px);
            margin: 0 10px;

            /deep/.el-card__body {
                padding: 0;
            }
        }
    }
}</style>
